<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>最小深度</title>
    </head>
    <body>

        <style type="text/css">
            .outer { border: 1px solid blue ; }
            .outer>div { border:1px solid red ; margin: 15px ; }
            .outer>div div { border: 1px solid green ; margin: 25px ; height: 50px ; }
        </style>

        <div class="outer">
            <div>
                <div></div>
            </div>
        </div>

        <hr>

        <style type="text/css">
            .navigator { border: 2px solid purple ; }
            .navigator>.list { 
                border:1px solid gray ; 
                margin: 5px ; 
            }

            .navigator>.list .item { 
                /* display: list-item 可以使非 li 元素 实现 列表项目 的功能 */
                display: list-item ;
                margin: 25px ; 
                border-bottom: 1px solid blue ;
                height: 50px ; 
            }
        </style>

        <div class="navigator">
            <div class="list">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>

        <hr>

        <style type="text/css">
            .navigator-list { 
                border:1px solid gray ; 
                margin: 5px ; 
            }

            .navigator-list-item { 
                /* display: list-item 可以使非 li 元素 实现 列表项目 的功能 */
                display: list-item ;
                margin: 25px ; 
                border-bottom: 1px solid red ;
                height: 50px ; 
            }
        </style>

        <div class="navigator">
            <div class="navigator-list">
                <div class="navigator-list-item"></div>
                <div class="navigator-list-item"></div>
                <div class="navigator-list-item"></div>
            </div>
        </div>
        
    </body>
</html>